<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商家聊天</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2627533_d7zlvvj6zdr.css">
    <style>
        body {
            background-color: #f5f5f5;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        .icon {
            font-size: 1.2rem;
        }
        .chat-container {
            background-color: #f5f5f5;
        }
        .message-bubble {
            max-width: 70%;
            border-radius: 16px;
            padding: 10px 15px;
            margin-bottom: 10px;
            position: relative;
            word-break: break-all;
        }
        .user-message {
            background-color: #0052d9;
            color: white;
            margin-left: auto;
            border-top-right-radius: 4px;
        }
        .merchant-message {
            background-color: white;
            color: #333;
            margin-right: auto;
            border-top-left-radius: 4px;
        }
        .quick-reply {
            display: inline-block;
            margin-right: 8px;
            margin-bottom: 8px;
            padding: 6px 12px;
            background-color: #f0f0f0;
            border-radius: 16px;
            font-size: 0.8rem;
            color: #333;
        }
        .quick-reply:active {
            background-color: #e0e0e0;
        }
        .shared-item {
            border-radius: 8px;
            border: 1px solid #e0e0e0;
            background-color: white;
            padding: 10px;
            margin-bottom: 10px;
            max-width: 70%;
        }
        .input-container {
            background-color: #f8f8f8;
            border-top: 1px solid #e0e0e0;
        }
    </style>
</head>
<body class="h-screen flex flex-col">
    <header class="bg-white p-4 flex items-center shadow-sm">
        <a href="../core/messages.html" class="mr-4">
            <i class="icon iconfont icon-arrow-left"></i>
        </a>
        <div class="flex-1">
            <h1 class="text-lg font-medium">清镇苗族手工艺品店</h1>
            <div class="text-xs text-green-500">在线</div>
        </div>
        <div class="flex">
            <button class="mx-2">
                <i class="icon iconfont icon-phone text-gray-600"></i>
            </button>
            <button class="mx-2">
                <i class="icon iconfont icon-more text-gray-600"></i>
            </button>
        </div>
    </header>

    <main class="chat-container flex-1 p-4 overflow-y-auto">
        <!-- 日期分隔线 -->
        <div class="flex justify-center mb-4">
            <span class="text-xs bg-gray-200 text-gray-500 px-2 py-1 rounded-full">2025年6月3日</span>
        </div>
        
        <!-- 系统消息 -->
        <div class="flex justify-center mb-4">
            <span class="text-xs bg-gray-200 text-gray-500 px-2 py-1 rounded">店铺客服已接入会话</span>
        </div>

        <!-- 商家消息 -->
        <div class="flex mb-4">
            <div class="w-8 h-8 rounded-full overflow-hidden mr-2 flex-shrink-0">
                <img src="https://via.placeholder.com/50x50?text=店铺" class="w-full h-full object-cover" alt="商家头像">
            </div>
            <div>
                <div class="text-xs text-gray-500 mb-1">店铺客服</div>
                <div class="message-bubble merchant-message">
                    您好，欢迎光临我们的手工艺品店，有什么可以帮您的吗？
                </div>
            </div>
        </div>
        
        <!-- 用户消息 -->
        <div class="flex mb-4 justify-end">
            <div>
                <div class="text-xs text-gray-500 mb-1 text-right">我</div>
                <div class="message-bubble user-message">
                    你好，我想了解一下你们店里的苗族银饰
                </div>
            </div>
            <div class="w-8 h-8 rounded-full overflow-hidden ml-2 flex-shrink-0">
                <img src="https://via.placeholder.com/50x50?text=用户" class="w-full h-full object-cover" alt="用户头像">
            </div>
        </div>
        
        <!-- 商家消息 - 商品分享 -->
        <div class="flex mb-4">
            <div class="w-8 h-8 rounded-full overflow-hidden mr-2 flex-shrink-0">
                <img src="https://via.placeholder.com/50x50?text=店铺" class="w-full h-full object-cover" alt="商家头像">
            </div>
            <div>
                <div class="text-xs text-gray-500 mb-1">店铺客服</div>
                <div class="message-bubble merchant-message">
                    我们店有很多精美的苗族银饰，这里推荐几款热销产品给您参考：
                </div>
                <!-- 商品卡片 -->
                <div class="shared-item">
                    <div class="flex">
                        <div class="w-16 h-16 rounded overflow-hidden mr-2 flex-shrink-0">
                            <img src="https://via.placeholder.com/64x64?text=银饰" class="w-full h-full object-cover" alt="商品图片">
                        </div>
                        <div class="flex-1">
                            <div class="text-sm font-medium">贵州苗族银饰项链 传统手工艺</div>
                            <div class="text-xs text-gray-500 mt-1">纯手工打造，925银材质</div>
                            <div class="text-red-500 text-sm mt-1">¥298.00</div>
                        </div>
                    </div>
                    <button class="w-full bg-blue-500 text-white text-xs py-1 rounded mt-2">查看详情</button>
                </div>
                
                <div class="shared-item mt-2">
                    <div class="flex">
                        <div class="w-16 h-16 rounded overflow-hidden mr-2 flex-shrink-0">
                            <img src="https://via.placeholder.com/64x64?text=手镯" class="w-full h-full object-cover" alt="商品图片">
                        </div>
                        <div class="flex-1">
                            <div class="text-sm font-medium">贵州苗族银手镯 民族图腾雕刻</div>
                            <div class="text-xs text-gray-500 mt-1">可调节大小，送礼佳品</div>
                            <div class="text-red-500 text-sm mt-1">¥368.00</div>
                        </div>
                    </div>
                    <button class="w-full bg-blue-500 text-white text-xs py-1 rounded mt-2">查看详情</button>
                </div>
            </div>
        </div>
        
        <!-- 用户消息 -->
        <div class="flex mb-4 justify-end">
            <div>
                <div class="text-xs text-gray-500 mb-1 text-right">我</div>
                <div class="message-bubble user-message">
                    第一款项链不错，我上次在你们店买过蜡染围巾，很满意，请问这个项链的工艺怎么样？
                </div>
            </div>
            <div class="w-8 h-8 rounded-full overflow-hidden ml-2 flex-shrink-0">
                <img src="https://via.placeholder.com/50x50?text=用户" class="w-full h-full object-cover" alt="用户头像">
            </div>
        </div>
        
        <!-- 商家消息 -->
        <div class="flex mb-4">
            <div class="w-8 h-8 rounded-full overflow-hidden mr-2 flex-shrink-0">
                <img src="https://via.placeholder.com/50x50?text=店铺" class="w-full h-full object-cover" alt="商家头像">
            </div>
            <div>
                <div class="text-xs text-gray-500 mb-1">店铺客服</div>
                <div class="message-bubble merchant-message">
                    这款项链是我们店的匠人纯手工打造，采用传统苗族银饰工艺，每一件都独一无二。材质是925银，佩戴舒适不易过敏。图案是传统的苗族图腾，寓意平安吉祥。
                </div>
                <div class="message-bubble merchant-message mt-2">
                    您上次购买的蜡染围巾我查询到了，是5月18日购买的蓝底白花图案对吧？感谢您的支持，如果您喜欢这款银饰，现在购买有优惠活动，可以享受9折优惠。
                </div>
                
                <!-- 订单分享 -->
                <div class="shared-item mt-2">
                    <div class="bg-blue-50 p-2 rounded text-xs text-blue-600 mb-2">
                        订单信息 #GZ2025051815482135
                    </div>
                    <div class="flex">
                        <div class="w-12 h-12 rounded overflow-hidden mr-2 flex-shrink-0">
                            <img src="https://via.placeholder.com/48x48?text=蜡染" class="w-full h-full object-cover" alt="商品图片">
                        </div>
                        <div class="flex-1">
                            <div class="text-xs font-medium">贵州侗族蜡染围巾 纯棉手工艺品</div>
                            <div class="text-xs text-gray-500">规格：180*60cm</div>
                            <div class="flex justify-between items-center mt-1">
                                <span class="text-xs text-gray-500">2025-05-18</span>
                                <span class="text-xs">¥168.00</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 用户消息 -->
        <div class="flex mb-4 justify-end">
            <div>
                <div class="text-xs text-gray-500 mb-1 text-right">我</div>
                <div class="message-bubble user-message">
                    好的，我很感兴趣，请问有视频介绍吗？
                </div>
            </div>
            <div class="w-8 h-8 rounded-full overflow-hidden ml-2 flex-shrink-0">
                <img src="https://via.placeholder.com/50x50?text=用户" class="w-full h-full object-cover" alt="用户头像">
            </div>
        </div>
        
        <!-- 商家消息 - 最后一条，带时间 -->
        <div class="flex mb-4">
            <div class="w-8 h-8 rounded-full overflow-hidden mr-2 flex-shrink-0">
                <img src="https://via.placeholder.com/50x50?text=店铺" class="w-full h-full object-cover" alt="商家头像">
            </div>
            <div>
                <div class="text-xs text-gray-500 mb-1">店铺客服 15:20</div>
                <div class="message-bubble merchant-message">
                    有的，我这就发给您视频介绍，您可以详细了解制作工艺。
                </div>
                <div class="w-48 h-24 bg-gray-200 rounded mt-2 flex items-center justify-center">
                    <i class="icon iconfont icon-video text-2xl text-gray-400"></i>
                </div>
            </div>
        </div>
    </main>
    
    <!-- 快捷回复区域 -->
    <div class="bg-white p-2 overflow-x-auto whitespace-nowrap">
        <button class="quick-reply">感谢您的介绍</button>
        <button class="quick-reply">这个价格可以优惠吗</button>
        <button class="quick-reply">有实体店吗</button>
        <button class="quick-reply">有更多款式吗</button>
        <button class="quick-reply">如何保养</button>
    </div>

    <!-- 输入区域 -->
    <div class="input-container p-2">
        <div class="flex items-center">
            <button class="p-2 text-gray-600">
                <i class="icon iconfont icon-voice"></i>
            </button>
            <input type="text" placeholder="请输入消息..." class="flex-1 border border-gray-200 rounded-full px-4 py-2 mx-2 focus:outline-none focus:border-blue-400">
            <button class="p-2 text-gray-600">
                <i class="icon iconfont icon-emoji"></i>
            </button>
            <button class="p-2 text-gray-600">
                <i class="icon iconfont icon-add"></i>
            </button>
        </div>
    </div>
</body>
</html> 